<template>
  <div class="brands-page">
    <div class="container">
      <!-- 页面标题 -->
      <div class="page-header">
        <h1 class="page-title">品牌专区</h1>
        <p class="page-subtitle">为您精选优质宠物品牌</p>
      </div>

      <!-- 品牌分类 -->
      <div class="brand-categories">
        <div class="category-tabs">
          <div 
            v-for="category in brandCategories"
            :key="category.value"
            class="category-tab"
            :class="{ active: selectedCategory === category.value }"
            @click="selectedCategory = category.value"
          >
            {{ category.label }}
          </div>
        </div>
      </div>

      <!-- 加载状态 -->
      <div v-if="brandsLoading" class="brands-loading">
        <div class="loading-spinner"></div>
        <p>正在加载品牌数据...</p>
      </div>
      
      <!-- 错误状态 -->
      <div v-else-if="brandsError" class="brands-error">
        <p>⚠️ 加载失败: {{ brandsError }}</p>
        <el-button @click="fetchBrands" type="primary" size="small">
          重新加载
        </el-button>
      </div>

      <!-- 品牌展示网格 -->
      <div v-else class="brands-grid">
        <div 
          v-for="brand in filteredBrands"
          :key="brand.id"
          class="brand-card card-shadow"
          @click="goToBrandProducts(brand)"
        >
          <!-- 品牌图标：使用纯文本首字母替代图片 -->
          <div class="brand-logo-text">
            {{ brand.name.charAt(0) }}
          </div>
          <div class="brand-info">
            <h3 class="brand-name">{{ brand.name }}</h3>
            <p class="brand-description">{{ brand.description }}</p>
            <div class="brand-stats" v-if="brand.productCount">
              <span class="product-count">{{ brand.productCount }} 款商品</span>
              <span class="sales-count" v-if="brand.sales">销量 {{ brand.sales }}+</span>
            </div>
            <div class="brand-tags" v-if="brand.tags && brand.tags.length">
              <el-tag 
                v-for="tag in brand.tags" 
                :key="tag" 
                size="small"
                type="info"
              >
                {{ tag }}
              </el-tag>
            </div>
          </div>
        </div>
      </div>

      <!-- 合作伙伴 -->
      <div class="partners-section">
        <h2 class="section-title">合作伙伴</h2>
        <div class="partners-grid">
          <div 
            v-for="partner in partners"
            :key="partner.id"
            class="partner-item"
          >
            <div class="partner-content">
              <h3 class="partner-name">{{ partner.name }}</h3>
              <p class="partner-description">{{ partner.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { partnersAPI } from '@/utils/api'

export default {
  name: 'BrandsPage',
  setup() {
    const router = useRouter()
    
    const selectedCategory = ref('all')
    
    // 品牌分类
    const brandCategories = ref([
      { label: '全部品牌', value: 'all' },
      { label: '宠物食品', value: 'food' },
      { label: '玩具用品', value: 'toys' },
      { label: '护理用品', value: 'care' },
      { label: '服装配饰', value: 'clothing' }
    ])
    
    // 品牌数据和加载状态
    const brands = ref([])
    const brandsLoading = ref(false)
    const brandsError = ref(null)
    
    // 获取品牌数据
    const fetchBrands = async () => {
      try {
        brandsLoading.value = true
        brandsError.value = null
        
        const response = await partnersAPI.getAll({ status: 'active' })
        
        if (response.success) {
          brands.value = response.data
          console.log('✅ 品牌专区数据加载成功:', response.data.length, '个品牌')
        } else {
          throw new Error(response.message || '获取品牌数据失败')
        }
      } catch (error) {
        console.error('❌ 获取品牌数据失败:', error)
        brandsError.value = error.message
        
        // 失败时使用备用数据
        brands.value = [
          {
            id: 1,
            name: '皇家宠物',
            description: '专业的宠物营养品牌，致力于为宠物提供均衡营养',
            category: 'food',
            productCount: 156,
            sales: 50000,
            tags: ['营养专家', '科学配方']
          },
          {
            id: 2,
            name: '护理专家',
            description: '专业宠物护理品牌，给宠物最贴心的呵护',
            category: 'care',
            productCount: 124,
            sales: 42000,
            tags: ['温和配方', '专业护理']
          }
        ]
      } finally {
        brandsLoading.value = false
      }
    }
    
    // 合作伙伴数据（通过API获取，与主要品牌数据相同）
    const partners = ref([])
    const partnersLoading = ref(false)
    
    // 获取合作伙伴数据
    const fetchPartners = async () => {
      try {
        partnersLoading.value = true
        const response = await partnersAPI.getAll({ status: 'active' })
        
        if (response.success) {
          partners.value = response.data
        }
      } catch (error) {
        console.error('获取合作伙伴数据失败:', error)
        // 使用备用数据
        partners.value = [
          { id: 1, name: '皇家宠物食品', description: '全球知名宠物营养专家' },
          { id: 2, name: '雀巢普瑞纳', description: '优质宠物食品制造商' },
          { id: 3, name: '玛氏宠物护理', description: '国际宠物护理领导品牌' }
        ]
      } finally {
        partnersLoading.value = false
      }
    }
    
    // 筛选后的品牌
    const filteredBrands = computed(() => {
      if (selectedCategory.value === 'all') {
        return brands.value
      }
      return brands.value.filter(brand => brand.category === selectedCategory.value)
    })
    
    // 方法
    const goToBrandProducts = (brand) => {
      router.push(`/products?brand=${brand.name}`)
    }
    
    // 页面初始化
    onMounted(() => {
      console.log('品牌专区页面加载完成')
      fetchBrands()
      fetchPartners()
    })
    
    return {
      selectedCategory,
      brandCategories,
      brands,
      brandsLoading,
      brandsError,
      fetchBrands,
      filteredBrands,
      partners,
      partnersLoading,
      fetchPartners,
      goToBrandProducts
    }
  }
}
</script>

<style scoped>
.brands-page {
  min-height: 100vh;
  background: #f8f9fa;
  padding: 40px 0;
}

.page-header {
  text-align: center;
  margin-bottom: 50px;
  background: white;
  padding: 60px 40px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.page-title {
  font-size: 2.5rem;
  color: #333;
  margin-bottom: 15px;
}

.page-subtitle {
  font-size: 1.2rem;
  color: #666;
}

.brand-categories {
  margin-bottom: 40px;
}

.category-tabs {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.category-tab {
  padding: 12px 30px;
  background: white;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  color: #666;
  font-weight: 500;
}

.category-tab:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.category-tab.active {
  background: #FF8C00;
  color: white;
}

.brands-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
  margin-bottom: 60px;
}

.brand-card {
  background: white;
  border-radius: 16px;
  padding: 30px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.brand-card:hover {
  transform: translateY(-5px);
}

/* 品牌首字母图标 */
.brand-logo-text {
  width: 120px;
  height: 120px;
  margin: 0 auto 25px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF8C00, #FFB300);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  font-weight: bold;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.brand-card:hover .brand-logo-text {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(255, 140, 0, 0.3);
}

.brand-info {
  text-align: center;
}

.brand-name {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}

.brand-description {
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
}

.brand-stats {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 20px;
}

.product-count,
.sales-count {
  color: #888;
  font-size: 0.9rem;
}

.brand-tags {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.partners-section {
  background: white;
  padding: 50px 40px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.section-title {
  font-size: 2rem;
  text-align: center;
  color: #333;
  margin-bottom: 40px;
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
}

.partner-item {
  padding: 25px 20px;
  background: #f8f9fa;
  border-radius: 12px;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 2px solid transparent;
}

.partner-item:hover {
  background: white;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(255, 140, 0, 0.15);
  border-color: #FF8C00;
}

.partner-content {
  text-align: center;
}

.partner-name {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
  transition: color 0.3s ease;
}

.partner-item:hover .partner-name {
  color: #FF8C00;
}

.partner-description {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.4;
  margin: 0;
  transition: color 0.3s ease;
}

.partner-item:hover .partner-description {
  color: #555;
}

/* 加载和错误状态样式 */
.brands-loading {
  text-align: center;
  padding: 80px 20px;
  color: #666;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #FF8C00;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.brands-loading p {
  margin: 0;
  font-size: 1.1rem;
}

.brands-error {
  text-align: center;
  padding: 80px 20px;
  color: #ff4757;
}

.brands-error p {
  margin: 0 0 20px 0;
  font-size: 1.1rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .brands-page {
    padding: 20px 0;
  }
  
  .page-header {
    padding: 40px 20px;
    margin-bottom: 30px;
  }
  
  .page-title {
    font-size: 2rem;
  }
  
  .category-tabs {
    gap: 10px;
  }
  
  .category-tab {
    padding: 10px 20px;
    font-size: 0.9rem;
  }
  
  .brands-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .brand-card {
    padding: 25px 20px;
  }
  
  .brand-logo-text {
    width: 100px;
    height: 100px;
    font-size: 2rem;
  }
  
  .partners-section {
    padding: 40px 20px;
  }
  
  .partners-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
  }
  
  .partner-item {
    padding: 20px 15px;
  }
  
  .partner-name {
    font-size: 1.1rem;
  }
  
  .partner-description {
    font-size: 0.85rem;
  }
}
</style>
